<script setup lang="ts">
import ClassroomFormPanel from './ClassroomFormPanel.vue'
import type { OrgApi } from '@/apis'
import { ClassroomApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useCampus, useTable } from '@/hooks'

defineOptions({
  name: 'Classroom',
})

// 校区列表
const {
  campusList: treeData,
  getCampusList: getTreeData,
  loading: treeLoading,
} = useCampus()

const queryForm = reactive<ClassroomApi.ClassroomQuery>({
  campusId: undefined,
  name: undefined,
})

const {
  tableData,
  loading,
  search,
} = useTable(() => ClassroomApi.getList({ ...queryForm }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '名称', dataIndex: 'name', slotName: 'name' },
  { title: '校区', dataIndex: 'campusName', slotName: 'campusName' },
  { title: '容纳人数', dataIndex: 'capacity', slotName: 'capacity' },
  { title: '面积(m²)', dataIndex: 'area', slotName: 'area' },
  { title: '备注', dataIndex: 'remark', slotName: 'remark', ellipsis: true, tooltip: true, render: ({ record }) => record.description || '--' },
]

// 根据选中校区查询
const selectedCampus = ref<OrgApi.OrgResp>()
const onTreeNodeSelect = (key: string, node: OrgApi.OrgResp) => {
  selectedCampus.value = node
  queryForm.campusId = key
  search()
}

// 新增
const ClassroomFormPanelRef = ref<InstanceType<typeof ClassroomFormPanel>>()
const onCreate = () => {
  ClassroomFormPanelRef.value?.create(selectedCampus.value?.id)
}
// 详情
const onDetail = (row) => {
  ClassroomFormPanelRef.value?.open(row.id)
}

onMounted(() => {
  getTreeData()
})
</script>

<template>
  <ProPage title="教室管理" description="从左侧选择校区后，对该校区的教室进行管理" flex-table>
    <TreeTableLayout>
      <template #left>
        <ListTree
          :loading="treeLoading"
          :data="treeData"
          @select="onTreeNodeSelect"
        />
      </template>
      <template #right>
        <ProTable
          :title="selectedCampus?.name"
          :data="tableData"
          :columns="columns"
          :loading="loading"
          :pagination="false"
          :show-index="true"
          :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
          @refresh="search"
          @row-click="onDetail"
        >
          <template #toolbar-left>
            <a-input v-model="queryForm.name" placeholder="请输入名称" allow-clear @change="search">
              <template #prefix>
                <icon-search />
              </template>
            </a-input>
          </template>
          <template #toolbar-right>
            <a-button v-permission="['system:org:manage']" type="primary" @click="onCreate">
              <template #icon>
                <icon-plus />
              </template>
              <span>创建</span>
            </a-button>
          </template>
        </ProTable>
      </template>
    </TreeTableLayout>
    <ClassroomFormPanel ref="ClassroomFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped>

</style>
